<script lang="ts" setup>
import { ref } from 'vue';

const expandMode = ref<'multi' | 'single'>('multi');
const accordionSize = ref<'extra-large' | 'large' | 'medium' | 'small'>(
  'medium',
);
const markerPosition = ref<'end' | 'start'>('start');
const blockMode = ref(false);

const handleAccordionChange = () => {
  // Accordion state changed
};

const handleItemClick = (item: string) => {
  // Accordion item clicked: ${item}
  console.warn(`Accordion item clicked: ${item}`);
};
</script>

<template>
  <div class="space-y-6 p-4">
    <div class="space-y-4">
      <h2 class="text-2xl font-bold">Accordion Gallery</h2>
      <p class="text-gray-600">
        Display collapsible content sections with FluentUI Accordion components.
      </p>
    </div>

    <!-- Controls -->
    <div class="rounded-md border p-4">
      <h3 class="mb-4 text-lg font-semibold">Controls</h3>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-4">
        <div>
          <label class="mb-2 block text-sm font-medium">Expand Mode</label>
          <select v-model="expandMode" class="w-full rounded border p-2">
            <option value="single">Single</option>
            <option value="multi">Multi</option>
          </select>
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium">Size</label>
          <select v-model="accordionSize" class="w-full rounded border p-2">
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
            <option value="extra-large">Extra Large</option>
          </select>
        </div>
        <div>
          <label class="mb-2 block text-sm font-medium">Marker Position</label>
          <select v-model="markerPosition" class="w-full rounded border p-2">
            <option value="start">Start</option>
            <option value="end">End</option>
          </select>
        </div>
        <div class="flex items-center">
          <label class="flex items-center">
            <input v-model="blockMode" type="checkbox" class="mr-2" />
            Block Mode
          </label>
        </div>
      </div>
    </div>

    <!-- Basic Example -->
    <div class="rounded-md border p-4">
      <h3 class="mb-4 text-lg font-semibold">Basic Accordion</h3>
      <Accordion :expand-mode="expandMode" @change="handleAccordionChange">
        <AccordionItem
          :size="accordionSize"
          :marker-position="markerPosition"
          :block="blockMode"
          @click="handleItemClick('getting-started')"
        >
          <template #heading> Getting Started </template>
          <div class="p-4">
            <p>Welcome to our application! Here's how to get started:</p>
            <ul class="mt-2 list-disc pl-6">
              <li>Create an account or sign in</li>
              <li>Complete your profile setup</li>
              <li>Explore the available features</li>
              <li>Contact support if you need help</li>
            </ul>
          </div>
        </AccordionItem>

        <AccordionItem
          :size="accordionSize"
          :marker-position="markerPosition"
          :block="blockMode"
          @click="handleItemClick('features')"
        >
          <template #heading> Features & Capabilities </template>
          <div class="p-4">
            <p>Our platform offers a comprehensive set of features:</p>
            <div class="mt-3 grid grid-cols-1 gap-2 md:grid-cols-2">
              <div class="rounded bg-blue-50 p-3">
                <strong>Data Management</strong>
                <p class="text-sm">
                  Import, export, and organize your data efficiently.
                </p>
              </div>
              <div class="rounded bg-green-50 p-3">
                <strong>Analytics</strong>
                <p class="text-sm">
                  Get insights with powerful analytics tools.
                </p>
              </div>
              <div class="rounded bg-purple-50 p-3">
                <strong>Collaboration</strong>
                <p class="text-sm">
                  Work together with team members seamlessly.
                </p>
              </div>
              <div class="rounded bg-orange-50 p-3">
                <strong>Integration</strong>
                <p class="text-sm">
                  Connect with your favorite third-party tools.
                </p>
              </div>
            </div>
          </div>
        </AccordionItem>

        <AccordionItem
          :size="accordionSize"
          :marker-position="markerPosition"
          :block="blockMode"
          expanded
          @click="handleItemClick('pricing')"
        >
          <template #heading> Pricing Information </template>
          <div class="p-4">
            <p>Choose the plan that works best for you:</p>
            <div class="mt-3 space-y-3">
              <div class="flex items-center justify-between rounded border p-3">
                <div>
                  <strong>Basic Plan</strong>
                  <p class="text-sm text-gray-600">Perfect for individuals</p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold">$9/month</div>
                  <div class="text-sm text-gray-500">billed monthly</div>
                </div>
              </div>
              <div class="flex items-center justify-between rounded border p-3">
                <div>
                  <strong>Pro Plan</strong>
                  <p class="text-sm text-gray-600">Great for small teams</p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold">$29/month</div>
                  <div class="text-sm text-gray-500">billed monthly</div>
                </div>
              </div>
              <div class="flex items-center justify-between rounded border p-3">
                <div>
                  <strong>Enterprise</strong>
                  <p class="text-sm text-gray-600">For large organizations</p>
                </div>
                <div class="text-right">
                  <div class="text-lg font-bold">Custom</div>
                  <div class="text-sm text-gray-500">contact sales</div>
                </div>
              </div>
            </div>
          </div>
        </AccordionItem>

        <AccordionItem
          :size="accordionSize"
          :marker-position="markerPosition"
          :block="blockMode"
          @click="handleItemClick('support')"
        >
          <template #heading> Support & Help </template>
          <div class="p-4">
            <p>We're here to help! Get support through multiple channels:</p>
            <div class="mt-3 space-y-2">
              <div class="flex items-center space-x-2">
                <span class="text-blue-500">📧</span>
                <span>Email: support@example.com</span>
              </div>
              <div class="flex items-center space-x-2">
                <span class="text-green-500">💬</span>
                <span>Live Chat: Available 24/7</span>
              </div>
              <div class="flex items-center space-x-2">
                <span class="text-purple-500">📞</span>
                <span>Phone: 1-800-SUPPORT</span>
              </div>
              <div class="flex items-center space-x-2">
                <span class="text-orange-500">📚</span>
                <span>Documentation: Comprehensive guides and tutorials</span>
              </div>
            </div>
          </div>
        </AccordionItem>
      </Accordion>
    </div>

    <!-- Nested Accordion Example -->
    <div class="rounded-md border p-4">
      <h3 class="mb-4 text-lg font-semibold">Nested Accordion</h3>
      <Accordion expand-mode="single">
        <AccordionItem :size="accordionSize" :marker-position="markerPosition">
          <template #heading> Web Development </template>
          <div class="p-2">
            <Accordion expand-mode="multi">
              <AccordionItem size="small">
                <template #heading> Frontend Technologies </template>
                <div class="p-3">
                  <ul class="list-disc pl-4">
                    <li>Vue.js</li>
                    <li>React</li>
                    <li>Angular</li>
                    <li>TypeScript</li>
                  </ul>
                </div>
              </AccordionItem>
              <AccordionItem size="small">
                <template #heading> Backend Technologies </template>
                <div class="p-3">
                  <ul class="list-disc pl-4">
                    <li>Node.js</li>
                    <li>Python</li>
                    <li>Java</li>
                    <li>C#</li>
                  </ul>
                </div>
              </AccordionItem>
            </Accordion>
          </div>
        </AccordionItem>

        <AccordionItem :size="accordionSize" :marker-position="markerPosition">
          <template #heading> Mobile Development </template>
          <div class="p-2">
            <Accordion expand-mode="multi">
              <AccordionItem size="small">
                <template #heading> Native Development </template>
                <div class="p-3">
                  <ul class="list-disc pl-4">
                    <li>Swift (iOS)</li>
                    <li>Kotlin (Android)</li>
                    <li>Java (Android)</li>
                  </ul>
                </div>
              </AccordionItem>
              <AccordionItem size="small">
                <template #heading> Cross-Platform </template>
                <div class="p-3">
                  <ul class="list-disc pl-4">
                    <li>React Native</li>
                    <li>Flutter</li>
                    <li>Xamarin</li>
                    <li>Ionic</li>
                  </ul>
                </div>
              </AccordionItem>
            </Accordion>
          </div>
        </AccordionItem>
      </Accordion>
    </div>

    <!-- States and Variations -->
    <div class="rounded-md border p-4">
      <h3 class="mb-4 text-lg font-semibold">Different States</h3>
      <div class="space-y-4">
        <div>
          <h4 class="mb-2 font-medium">Disabled Item</h4>
          <Accordion>
            <AccordionItem>
              <template #heading> Regular Item </template>
              <div class="p-4">This item is enabled and can be expanded.</div>
            </AccordionItem>
            <AccordionItem disabled>
              <template #heading> Disabled Item </template>
              <div class="p-4">
                This item is disabled and cannot be expanded.
              </div>
            </AccordionItem>
          </Accordion>
        </div>

        <div>
          <h4 class="mb-2 font-medium">Different Heading Levels</h4>
          <Accordion>
            <AccordionItem :heading-level="1">
              <template #heading> H1 Heading Level </template>
              <div class="p-4">Content with H1 heading level.</div>
            </AccordionItem>
            <AccordionItem :heading-level="3">
              <template #heading> H3 Heading Level </template>
              <div class="p-4">Content with H3 heading level.</div>
            </AccordionItem>
            <AccordionItem :heading-level="6">
              <template #heading> H6 Heading Level </template>
              <div class="p-4">Content with H6 heading level.</div>
            </AccordionItem>
          </Accordion>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
